<template>
  <div style="position: relative" class="message-page">
    <div>
      <div class="container">
        <div class="m-item" v-for="item in messagesPageList">
          <div>
            {{ item.createTime }}
          </div>
          <div>
            校友留言:
          </div>
          <div class="liuyan">
            {{ item.liuyan }}
          </div>

          <div style="margin-top: 24px;">
            <div>校友签名:</div>
            <img style="width: 150px;height: 135px;margin-top: 4px;" :src="item.tupian"/>
          </div>
        </div>
      </div>
      <el-dialog
        title="留言"
        style="width: 100%;height: 90%;margin: 0 auto;"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        top="5vh"
      >
        <div class="container-text">
          <!-- <el-input
            type="text"
            placeholder="请输入标题"
            v-model="textarea">
          </el-input> -->
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="textarea"
            style="border: 1px rgb(158, 158, 158) solid;border-radius:4px "
          >
          </el-input>
          <div style="height:44px;line-height:44px;color:rgb(66, 108, 221)">签名留言</div>
          <div style="border: 1px #e0e0e0 dashed;border-radius:4px;">
            <vue-esign
              class="sign-view"
              ref="esign"
              :width="1500"
              :height="1350"
              :isCrop="isCrop"
              :lineWidth="lineWidth"
              :lineColor="lineColor"
              :bgColor.sync="bgColor"
            />
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-row style="margin-bottom: 20px;">
            <el-button @click="pencil" :autofocus="true">笔刷</el-button>
            <el-button @click="eraser">橡皮擦</el-button>
          </el-row>
          <el-row>
            <el-button type="primary" @click="onRest()">清空画布</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onsubmit()">提 交</el-button>
          </el-row>
        </div>
      </el-dialog>
    </div>
    <!--    <div class="btn-message" @click="onMessage">-->
    <!--      <div class="message">-->
    <!--        留言-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <div style="display: flex; justify-content: center; align-items: center;margin:20px 0px;" @click="onMessage">
      <el-button @click="onMessage" style="width: 95%; background:  #be272d ;color: #fff;border-radius: 7px;">
        留言
      </el-button>
    </div>
    <!--    <div>-->
    <!--      <MyBottom></MyBottom>-->
    <!--    </div>-->
  </div>
</template>

<script>
import Myheader from "./header.vue";
import MyBottom from "./bottom.vue";
import vueEsign from "vue-esign";
import {addSign, getSignList} from "@/api";

export default {
  name: "message",
  components: {MyBottom, Myheader, vueEsign},
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "#fff",
      resultImg: "",
      isCrop: false,
      textarea: "",
      dialogVisible: false,
      messageList: [],
      total: 0,
      currentPage: 1,
      pageSize: 18,
      messagesPageList: [],

    };
  },
  methods: {
    pencil() {
      this.lineWidth = 6
      this.lineColor = '#000'
    },
    eraser() {
      this.lineColor = '#fff'
      this.lineWidth = 120
    }
    ,
    onRest() {
      this.$refs.esign.reset();
    },
    onMessage() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    onsubmit() {
      this.$refs.esign
        .generate()
        .then(res => {
          console.log(res);
          addSign({liuyan: this.textarea, tupian: res})
            .then(res => {
              console.log(res);
              //清空
              this.textarea = '';
              this.onRest();
              this.getSignListData();
            })
            .catch(err => {
              console.log(err);
            });

          this.dialogVisible = false;
          this.$emit("finish", res);
        })
        .catch(err => {
          // 画布没有签字时会执行这里 'Not Signned'
          this.$message.error("您还未完成签字，请签字完成后保存");
        });
    },

    // 当前页改变时触发
    handleCurrentChange(pageNum) {
      console.log('当前页改变时触发', pageNum);
      this.currentPage = pageNum;
      this.messagesPageList = this.messageList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      console.log((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },

    getSignListData() {
      getSignList()
        .then(res => {
          //进行最新排序
          this.messageList = res.data.map(item => ({...item})).sort((a, b) => {
            let aTime = new Date(a.createTime);
            let bTime = new Date(b.createTime);
            return bTime - aTime
          })
          this.total = this.messageList.length;
          this.page = 1;
          //分页显示  messagesPageList
          this.messagesPageList = this.messageList.slice(0, this.pageSize);

          console.log("res: ", this.messagesPageList);
        })
        .catch(err => {
          console.log("err: ", err);
        });
    }
  },
  mounted() {
    this.getSignListData();
  }
};
</script>

<style scoped>
.page {
  margin: 50px 0 30px;
  //width: 300px;
  //float: right;
  display: flex;
  justify-content: end;
}

.el-pagination {
  //width: 300px;
  margin-right: 20px;
}

.container-text {
  /* border: 1px #e0e0e0 solid;
  border-radius: 10px; */
}

/deep/ .el-dialog__body {
}

/deep/ .el-input__inner {
  /*margin-bottom: 20px;*/
  border: none;
  border-radius: 10px;
}

/deep/ .el-textarea__inner {
  /*margin-bottom: 20px;*/
  border: none;
  border-radius: 10px;
}

/deep/ .el-dialog {
  width: 80% !important;
  //height: 72% !important;
}

.btn-message {
  position: fixed;
  right: 5%;
  z-index: 99;
  bottom: 10%;
}

.message {
  width: 150px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  font-size: 40px;
  border-radius: 50%;
  color: #fff;
  background-color: #3d80e4;
  cursor: pointer;
}

.m-item {
  background-color: #93171f;
  color: #be272d;
  padding: 10px;
  height: 250px;
  border-radius: 10px;
  border: 1px solid #93171f;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: grid;
  margin: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  //height: calc(100% - 20px );
  height: 830px;
  overflow: hidden;
  overflow-y: scroll;
  //图片透明
  //opacity: 0.5;
  //background-image: url("../assets/logo.jpg");
  //background-size: cover;

}

.message-page {

}
.m-item img {
  //width: 100px;
  //height: 100px;
}
</style>
